<template>
  <el-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    style="width: 420px"
  >
    <el-form :model="form" label-position="top">
      <el-form-item label="课程名称" :label-width="formLabelWidth">
        <el-input v-model="form.courseName" disabled />
      </el-form-item>
      <el-form-item label="章节名称" :label-width="formLabelWidth">
        <el-input v-model="form.chapterName" disabled />
      </el-form-item>
      <el-form-item label="课时名称" :label-width="formLabelWidth">
        <el-input v-model="form.lessonName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="时长" :label-width="formLabelWidth">
        <el-input v-model="form.duration" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否开放试听" :label-width="formLabelWidth">
        <el-switch
          v-model="form.is_free"
          :active-value="true"
          :inactive-value="false"
        />
      </el-form-item>
      <el-form-item label="课时排序" :label-width="formLabelWidth">
        <el-input-number
          v-model="form.sort"
          autocomplete="off"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="课时简介" :label-width="formLabelWidth">
        <el-input
          v-model="form.brief"
          type="textarea"
          placeholder="不超过100字"
          maxlength="100"
          show-word-limit
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="color: #606266" @click="dialogFormVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

import { courseInfoData } from '@/api/course/type'
import { saveOrUpdateLesson } from '@/api/course'
import { ElMessage } from 'element-plus'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const initData = () => ({
  id: undefined as undefined | number,
  course_id: 0,
  chapter_id: 0,
  lessonName: '',
  brief: '',
  sort: 0,
  is_free: true,
  duration: 0,
  courseName: '',
  chapterName: '',
  status: 0
})

//声明表单数据
const form = reactive(initData())

//是否免费
const freeFlag = [false, true]

//声明对话框标题
let title = ref('')

//声明消息
const emits = defineEmits<{
  (e: 'lessonChange'): void
}>()

//初始化方法
const showAndInit = (node: any, data: any, courseInfo: courseInfoData) => {
  //每次显示对话框，都先恢复为默认空值
  Object.assign(form, initData())
  if (node.level === 1) {
    //添加课时
    title.value = '添加课时'
    form.chapter_id = data.id
    form.chapterName = data.chapterName
  } else if (node.level === 2) {
    //data，当前节点数据
    console.log(data, 'data')
    //node 节点（Node）对象
    // console.log(node, 'node')
    form.id = data.id
    // console.log(node.parent.data, 'node')
    form.chapter_id = data.chapter_id
    form.chapterName = node.parent.data.chapterName
    //用最新的课时信息填写到表单，这个地方也可以从数据库中查询到信息
    //这里我们用表单中的数据
    form.lessonName = data.lessonName
    form.duration = data.duration
    form.is_free = freeFlag[data.is_free]

    form.sort = data.sort
    form.status = data.status
    form.brief = data.brief
    //编辑课时
    title.value = '更新课时'
  }

  form.course_id = courseInfo.id!
  form.courseName = courseInfo.title

  dialogFormVisible.value = true
}

//课时表单提交
const onSubmit = async () => {
  console.log(form, 'form')
  const res = await saveOrUpdateLesson(form)

  console.log(res)

  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: `${res.msg}`
    })
    emits('lessonChange')

    dialogFormVisible.value = false
  } else {
    ElMessage({
      type: 'error',
      message: `${res.msg}`
    })

    throw new Error('${res.msg}')
  }
}

//对外暴漏方法
defineExpose({
  showAndInit
})
</script>

<style scoped></style>
